<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>成绩信息列表</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!-- Bootstrap 3.3.7 -->
    <!--link导入外部的css，js样式，如果导入的资源和本页面在同一个文件夹下，直接文件名即可-->
    <link rel="stylesheet" th:href="@{/asserts/bower_components/bootstrap/dist/css/bootstrap.min.css}">
    <!-- jQuery 3 -->
    <script th:src="@{/asserts/bower_components/jquery/dist/jquery.min.js}"></script>
    <!-- Bootstrap 3.3.7 -->
    <script th:src="@{/asserts/bower_components/bootstrap/dist/js/bootstrap.min.js}"></script>
    <!-- Font Awesome -->
    <link rel="stylesheet" th:href="@{/asserts/bower_components/font-awesome/css/font-awesome.min.css}">
    <!-- Ionicons -->
    <link rel="stylesheet" th:href="@{/asserts/bower_components/Ionicons/css/ionicons.min.css}">
    <!-- DataTables -->
    <link rel="stylesheet" th:href="@{/asserts/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css}">
    <!-- Theme style -->
    <link rel="stylesheet" th:href="@{/asserts/dist/css/AdminLTE.min.css}">

    <script th:src="@{/asserts/Apolar_sh/lib/layer/2.4/layer.js}"></script>


    <!-- Google Font -->
    <link rel="stylesheet"
          href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            font-size: 16px;
        }

        .search {
            margin-top: 40px;
            margin-left: 40px;
            position: relative;
        }

        td {
            text-align: center;
        }

        th {
            text-align: center;
        }

        #top {
            background-color: rgba(172, 175, 175, 0.78);
            display: none;
            position: fixed;
            right: -3px;
            bottom: 50px;
        }

        #top a {
            color: rgba(61, 61, 61, 0.91);
            font-size: 45px;
        }

        .resume {
            border: 0;
            appearance: none;
            -moz-appearance: none;
            -webkit-appearance: none;
        }

        .result {
            width: 1em;
            border: 0;
            appearance: none;
            -moz-appearance: none;
            -webkit-appearance: none;
        }


        #home {
            display: block;
            position: absolute;
            right: 10px;
            top: 8px;
            z-index: 9999;
            font-size: 30px;
        }

        #refresh {
            display: block;
            position: absolute;
            right: 46px;
            top: 10px;
            z-index: 9999;
            font-size: 26px;
        }

    </style>

</head>
<body>

<a name="up"></a>
<span>
    <a id="refresh" class="fa fa-refresh"  href="javascript:location.reload()"></a>
<a th:if="${classinfo != null}" id="home" class="fa fa-home" th:href="@{/score/list(classId=${classId},currentPage=${currentPage},startTime=${classDate},tName=${classinfo.getTName()},mName=${classinfo.getMName()},sName=${classinfo.getSName()})}"></a>
    <a th:if="${classinfo == null}" id="home" class="fa fa-home" th:href="@{/score/list(classId=${classId},currentPage=${currentPage},startTime=${classDate})}"></a>
</span>
<div class="wrapper">
    <!-- Content Wrapper. Contains page content -->
    <!-- Content Header (Page header) -->
    <!-- Main content -->
    <section class="content-header">
            <h4 th:if="${info==null}">
                <i class="fa fa-search"></i> 搜索成绩信息
            </h4>
    </section>

    <div class="search" style="margin-top: 15px">
        <div class="row">
            <div class="col-xs-5" th:if="${info==null}">
                <form class="form-inline" id="searchFrom" th:action="${classinfo == null}?@{/score/search(classId=${classId},currentPage=${currentPage})}:@{/score/search(classId=${classId},currentPage=${currentPage},startTime=${classDate},tName=${classinfo.getTName()},mName=${classinfo.getMName()},sName=${classinfo.getSName()})}"
                      method="post">

                    <div class="form-group">
                        <label for="sname">学生姓名：</label>
                        <input type="text" class="form-control" id="sname" name="sname" th:value="${sname}"
                               placeholder="请输入学生姓名">
                    </div>
                    <button type="submit" class="btn btn-success"><i class="fa fa-search"></i> 搜索</button>
                </form>
            </div>
            <!-- /.col -->
        </div>
        <!-- /.row -->
    </div>

    <!-- /.content -->
</div>


<div class="wrapper">
    <!-- Content Wrapper. Contains page content -->
    <!-- Content Header (Page header) -->
    <section class="content-header" style="padding-bottom: 0px;padding-top: 5px">
        <h4 style="margin: 0;padding-top: 10px">
            <div class="form-group"  style="padding-bottom: 0px;margin-bottom: 0px">
                <i th:if="${searchUrl == null}" class="fa fa-navicon col-sm-11 control-label"
                   style="margin-top: 4px;font-size: 18px">班级成绩列表——<label
                        style="font-size: 22px">[[${className}]]</label></i>
                <i th:if="${searchUrl != null}" class="fa fa-navicon col-sm-11 control-label"
                   style="margin-top: 4px;font-size: 18px">搜索结果列表——<label
                        style="font-size: 22px">[[${className}]]</label></i>

                <span style="">
                    <a class="btn btn-info" th:if="${classinfo == null}"
                       th:href="@{/career/findAll(currentPage=${currentPage})}">
                        <i class="fa fa-backward">&nbsp;返回</i>
                    </a>
                    <a class="btn btn-info" th:if="${classinfo != null}"
                       th:href="@{/career/searchClass(currentPage=${currentPage},startTime=${classDate},tName=${classinfo.getTName()},mName=${classinfo.getMName()},sName=${classinfo.getSName()})}">
                        <i class="fa fa-backward">&nbsp;返回</i>
                    </a>

            </span>
            </div>

        </h4>

    </section>


    <!-- Main content -->
    <section class="content">
        <div class="row">
            <div class="col-xs-12">
                <div class="box">
                    <!-- /.box-header 部门列表的显示  table  表格  th/td单元个   th字体加粗，行标题-->
                    <div th:if="${info!=null}" class="box-body">
                        <h2 style="text-align:center;color: #ff0000;font-size: 30px;font-weight: bold"
                            th:text="${info}"></h2>
                    </div>
                    <div th:if="${info==null}" class="box-body">

                        <table id="example1" class="table table-bordered table-hover">
                            <tbody>
                            <tr>
                                <th>姓名</th>
                                <th>平均成绩</th>
                                <th>笔试成绩</th>
                                <th>面试成绩</th>
                                <th>实战项目名</th>
                                <th>线上成绩</th>
                                <th>线下成绩</th>
                                <!--	      下面两项CRM平台编写-->
                                <th>简历</th>
                                <th>综测结果</th>
                            </tr>
                            <tr th:each="score:${scores}">
                                <td th:text="${score.sname}">Tom1</td>
                                <td th:text="${score.averGrade==-1?'':score.averGrade}">88</td>
                                <td th:text="${score.writGrade==-1?'':score.writGrade}">87</td>
                                <td th:text="${score.viewGrade==-1?'':score.viewGrade}">89</td>
                                <td th:text="${score.project}">56</td>
                                <td th:text="${score.upGrade==-1?'':(score.upGrade==1?'通过':'不通过')}">67</td>
                                <td th:text="${score.downGrade==-1?'':(score.downGrade==1?'通过':'不通过')}">88</td>

                                <!--<input name="sid" th:value="${score.sid}" type="hidden">-->
                                <td>
                                    <select name="resume" onchange="resumeChange(this)" th:id="${score.sid}"
                                            class="resume">
                                        <option selected disabled th:text="'———'"></option>
                                        <option th:selected="${score.resume == 0}" th:text="不通过" th:value="0"></option>
                                        <option th:selected="${score.resume == 1}" th:text="通过" th:value="1"></option>
                                    </select>
                                </td>
                                <!--<input name="resume" style="width:3em;border:none;font-size: 16px;outline:none"
                                       th:value="${score.resume==-1?'':(score.resume==1?'通过':'不通过')}">-->
                                <td>
                                    <select name="result" onchange="resultChange(this)" th:id="${score.sid}"
                                            class="result">
                                        <option selected disabled th:text="'—'"></option>
                                        <option th:selected="${score.result == 'A'}" th:text="A" th:value="A"></option>
                                        <option th:selected="${score.result == 'B'}" th:text="B" th:value="B"></option>
                                        <option th:selected="${score.result == 'C'}" th:text="C" th:value="C"></option>
                                        <option th:selected="${score.result == 'D'}" th:text="D" th:value="D"></option>
                                    </select>
                                    <!--<input name="result" style="width:2em;border:none;font-size: 16px;outline:none"
                                       th:value="${score.result}"></td>-->
                            </tr>

                            <tr>
                                <td colspan="13" style="text-align:right;padding-left:20px;">
                                    <a class="btn btn-info" th:onclick="submit()">
                                        <i class="fa fa-check-square">&nbsp;保存</i>&nbsp;
                                    </a>

                                </td>
                            </tr>
                            <tr>

                            </tr>
                            </tbody>
                        </table>
                        <div id="top">
                            <a href="#up" title="回到顶部" class="fa fa-angle-double-up"></a>
                        </div>

                    </div>
                    <!-- /.box-body -->
                </div>
                <!-- /.box -->
            </div>

            <!-- /.col -->
        </div>
        <!-- /.row -->

    </section>
    <!-- /.content -->

</div>

<!-- ./wrapper -->

<!-- DataTables -->
<script th:src="@{/asserts/bower_components/datatables.net/js/jquery.dataTables.min.js}"></script>
<script th:src="@{/asserts/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js}"></script>
<!-- SlimScroll -->
<script th:src="@{/asserts/bower_components/jquery-slimscroll/jquery.slimscroll.min.js}"></script>
<!-- FastClick -->
<script th:src="@{/asserts/bower_components/fastclick/lib/fastclick.js}"></script>
<!-- AdminLTE App -->
<script th:src="@{/asserts/dist/js/adminlte.min.js}"></script>
<!-- AdminLTE for demo purposes -->
<script th:src="@{/asserts/dist/js/demo.js}"></script>
<!-- page script -->
<!-- page script -->
<script>

    var lists = [];

    function resumeChange(obj) {
        /*console.log($(obj).parent().next().children().val());*/
        if (lists[$(obj).attr("id")] == undefined || lists[$(obj).attr("id")] == null) {
            lists[$(obj).attr("id")] = {
                sid: $(obj).attr("id"),
                resume: obj.value,
                result: $(obj).parent().next().children().val() == null ? '' : $(obj).parent().next().children().val()
            };
        } else {
            lists[$(obj).attr("id")].resume = obj.value;
        }
        /*console.log(lists);*/
    }

    function resultChange(obj) {
        /* console.log("---");
         console.log($(obj).parent().prev().children().val());
         console.log("====");*/
        if (lists[$(obj).attr("id")] == undefined || lists[$(obj).attr("id")] == null) {
            lists[$(obj).attr("id")] = {
                sid: $(obj).attr("id"),
                resume: $(obj).parent().prev().children().val() == null ? '0' : $(obj).parent().prev().children().val(),
                result: obj.value
            };
        } else {
            lists[$(obj).attr("id")].result = obj.value;
        }
        /*console.log(lists);*/
    }

    function submit() {
        console.log(lists);
        var flag = true;
        for (var index in lists) {
            if (lists[index] != null) {
                flag = false;
                break;
            }
        }
        if (lists.length == 0 || flag) {
            layer.msg('亲，请修改之后再保存哦', {
                icon: 0,
                time: 1500
            });
        } else {
            layer.confirm("确认保存？",
                {
                    btn: ['确定', '取消'] //按钮
                },
                function () {
                    var checks = lists.toString();
                    $.ajax({
                        type: 'POST',
                        contentType: "application/json",
                        processData: false,
                        dataType: 'json',
                        data: JSON.stringify(lists),
                        url: "[[${#httpServletRequest.getContextPath()}]]" + "/score/updateMy",
                        success: function (data) {
                            if (data.id === 0) {
                                layer.msg(data.data, {
                                    icon: 1,
                                    time: 500
                                });
                                setTimeout(function () {
                                    location.replace(location.href);
                                }, 500);
                            } else {
                                layer.msg(data.data, {
                                    icon: 0,
                                    time: 2000
                                });
                            }
                        },
                        error: function (data) {
                            console.log("===+++");
                            console.log(data.msg);
                        }
                    });
                },
                function () {
                    layer.msg('已取消！', {icon: 0});
                    return false;
                }
            );
        }

    };


</script>

<script type="text/javascript">
    $(function () {
        $(window).scroll(function () {
            if ($(window).scrollTop() > 150) {
                $('#top').css('display', 'block');    //<div id-'top'></div>假如有这么个div是那个向上图标的div。css默认none
            } else {
                $('#top').css('display', 'none');
            }
        });
    });

</script>

<script>
    /*查询的非空判定*/
    $("#searchFrom").submit(
        function () {
            var sname = $("#sname").val();
            if (sname == null || sname === "") {
                layer.msg('亲，查询内容不能为空哦!', {
                    icon: 0,
                    time: 1500
                });
                return false;
            }
            return true;
        }
    );

</script>

</body>
</html>